<template>
  <div class="cartSuccess fixed-top">
    <!-- 引入公共头部 -->
    <NavBar title="支付订单" back fixed url="/user/order"/>
    <ul id="rightUl" class="item-ul">
      <li v-for="item in list" :key="item.id">
        <tr>
          <td width="10%">
            <van-card
              tag="热卖"
              :num="item.num"
              :price="parseFloat(item.payPrice).toFixed(2)"
              :desc="'规格：'+item.property"
              :title="'商品名称：'+item.gdsName"
              :thumb="GLOBAL.baseImagePath + item.gdsUrl"
              :origin-price="item.isDiscount === 1 ? item.salePrice : undefined"
            >
            </van-card>
          </td>
        </tr>
      </li>
    </ul>
    <div>
      <div>
        <div class="van-address-list" style="padding-bottom: 0px">
          <div class="van-radio-group">
            <div class="van-cell-group van-hairline--top-bottom">
              <div class="van-cell van-cell--clickable van-address-item">
                <!---->
                <!---->
                <div class="van-cell__value van-cell__value--alone">
                  <div class="van-radio">
                    <span class="van-radio__input">
                    <input type="radio" value="1" checked="checked" class="van-radio__control">
                  </span>
                    <span class="van-radio__label">
                    <div class="van-address-item__name">{{confirmAddress.name}} {{confirmAddress.tel}}</div>
                      <div class="van-address-item__address">{{confirmAddress.addressDetail}}</div>
                  </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-submit-bar
      :loading="isLoading"
      :price="totalPrice*100"
      button-text="确认支付"
      @submit="onSubmit"
    >
    </van-submit-bar>
    <!-- 引入公共底部 -->
    <tab-bar/>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import TabBar from '../../components/common/TabBar.vue'
import orderApi from '../../api/order'
import { Dialog, Toast } from 'vant'
export default {
  name: 'cartSuccess',
  data () {
    return {
      list: [],
      isLoading: false,
      confirmAddress: {id: 0, name: '', tel: '', addressDetail: ''}
    }
  },
  components: {
    NavBar,
    TabBar
  },
  computed: {
    totalPrice: function () {
      let num = 0
      if (this.list === null) {
        return 0
      }
      for (let i = 0; i < this.list.length; i++) {
        // 是否优惠
        num = this.list[i].num * this.list[i].payPrice + num
      }
      return num
    }
  },
  mounted () {
    this.getOrderList()
    this.updateAddress()
  },
  methods: {
    updateAddress: function (res) {
      res = JSON.parse(sessionStorage.getItem('tempAddress'))
      if (res) {
        this.confirmAddress.name = res.receiptName + ', '
        this.confirmAddress.tel = res.receiptTel
        this.confirmAddress.addressDetail = res.receiptAddress
      }
    },
    onSubmit: function () {
      let _this = this
      Toast.loading({
        duration: 1000,
        mask: true,
        message: '正在玩命支付，请稍后.....'
      })
      this.isLoading = true
      let goodsList = JSON.parse(sessionStorage.getItem('payGoodsList'))
      let orderPayInfo = []
      let proper = {
        orderId: sessionStorage.getItem('orderId')
      }
      orderPayInfo.push(proper)
      for (let i = 0; i < goodsList.length; i++) {
        let proper1 = {
          goodsId: goodsList[i].goodsId,
          goodsNum: goodsList[i].num
        }
        orderPayInfo.push(proper1)
      }
      orderApi.queryBalances(JSON.stringify(orderPayInfo)).then(function (res) {
        sessionStorage.clear()
        let temp = res.data.re
        _this.isLoading = false
        if (temp !== null) {
          if (temp[0].status === 3) {
            _this.isLoading = false
            Dialog.alert({
              title: '支付信息',
              message: '购买成功！共支付：' + parseFloat(_this.totalPrice).toFixed(2) + '元'
            }).then(() => {
              _this.$router.push('/user/order')
            })
          } else if (temp[0].status === 0) {
            _this.isLoading = false
            Dialog.alert({
              title: '支付信息',
              message: '购买失败：' + temp[0].showStatus
            }).then(() => {
              _this.$router.push('/user/order')
            })
          } else if (temp[0].status === 1) {
            _this.isLoading = false
            Dialog.confirm({
              title: '支付信息',
              message: '购买失败！余额不足',
              confirmButtonText: '去充值',
              cancelButtonText: '重新选择商品'
            }).then(() => {
              _this.$router.push({path: '/user/wallet', query: {cartSuccess: 1}})
            }).catch(() => {
              _this.$router.push({path: '/cart'})
            })
          } else {
            Dialog.alert({
              title: '支付信息',
              message: '购买失败！订单可能已被取消，点击确认返回我的订单'
            }).then(() => {
              _this.$router.push('/user/order')
            })
            Toast.fail('支付失败')
          }
        } else {
          _this.isLoading = false
          Dialog.alert({
            title: '支付信息',
            message: '购买失败！点击确认返回我的订单'
          }).then(() => {
            _this.$router.push('/user/order')
          })
          Toast.fail('支付失败')
        }
      })
    },
    getOrderList () {
      let _this = this
      let temp = JSON.parse(sessionStorage.getItem('payGoodsList'))
      let orderId = sessionStorage.getItem('orderId')
      if (temp != null) {
        orderApi.getOrderGoodsList(JSON.stringify(temp), orderId).then(function (res) {
          if (res.data.re === null || res.data.re.length === 0) {
            Toast.fail('未获取到订单信息,已经返回我的订单列表')
            // _this.$router.push({path: '/user/order'})
          }
          if (res.data.re !== null) {
            _this.list = res.data.re
          }
        })
      } else {
        Toast.fail('正在返回我的订单列表')
        _this.$router.push({path: '/user/order'})
      }
    }
  }
}
</script>
<style scoped>
  .item-ul .van-card {
    background: #fff;
    border-bottom: 1px solid #fafafa;
  }
</style>
